<template>
  <div class="panel grid">
    <el-card shadow="never">
      <template #header><b>FAT 数据</b></template>
      <el-table :data="data.fat || []" size="small" border height="200">
        <el-table-column prop="item" label="项目" />
        <el-table-column prop="value" label="数值" />
        <el-table-column prop="unit" label="单位" width="80" />
      </el-table>
      <el-empty v-if="!loading && (!data.fat || data.fat.length===0)" description="暂无数据"/>
    </el-card>

    <el-card shadow="never">
      <template #header><b>调试数据</b></template>
      <el-table :data="data.tuning || []" size="small" border height="200">
        <el-table-column prop="time" label="时间" width="160" />
        <el-table-column prop="desc" label="内容" />
        <el-table-column prop="result" label="结果" width="120" />
      </el-table>
      <el-empty v-if="!loading && (!data.tuning || data.tuning.length===0)" description="暂无数据"/>
    </el-card>

    <el-card shadow="never">
      <template #header><b>每次维修后调试数据</b></template>
      <el-table :data="data.afterFix || []" size="small" border height="200">
        <el-table-column prop="orderNo" label="工单号" width="140"/>
        <el-table-column prop="time" label="时间" width="160" />
        <el-table-column prop="result" label="结果" width="120" />
        <el-table-column prop="memo" label="备注" />
      </el-table>
      <el-empty v-if="!loading && (!data.afterFix || data.afterFix.length===0)" description="暂无数据"/>
    </el-card>

    <el-card shadow="never">
      <template #header><b>运行/待用时间</b></template>
      <el-descriptions :column="2" size="small" border>
        <el-descriptions-item label="运行时间(h)">{{ data.runHours ?? '-' }}</el-descriptions-item>
        <el-descriptions-item label="待用时间(h)">{{ data.idleHours ?? '-' }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card shadow="never" class="full">
      <template #header><b>运行数据</b></template>
      <el-table :data="data.runRecords || []" size="small" border height="260">
        <el-table-column prop="time" label="时间" width="160" />
        <el-table-column prop="kpi" label="指标" width="140" />
        <el-table-column prop="value" label="数值" width="120" />
        <el-table-column prop="unit" label="单位" width="80" />
        <el-table-column prop="remark" label="备注" />
      </el-table>
      <el-empty v-if="!loading && (!data.runRecords || data.runRecords.length===0)" description="暂无数据"/>
    </el-card>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { getAssetUsageData } from '@/api/sbtz/assetExtra'

const props = defineProps({ node: Object })
const loading = ref(false)
const data = ref({
  fat: [], tuning: [], afterFix: [],
  runHours: null, idleHours: null, runRecords: []
})

async function fetch() {
  if (!props.node?.id) return
  loading.value = true
  try {
    const { data:res } = await getAssetUsageData(props.node.id)
    data.value = res || {}
  } finally {
    loading.value = false
  }
}
watch(()=>props.node?.id, fetch, { immediate:true })
</script>

<style scoped>
.panel{ padding:8px; }
.grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.full{ grid-column: 1 / -1; }
</style>
